<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <#include "common.ftl" />
    <style>
        body {
            width: 100%!important;
            height: 100%!important;
            background: url(${ticket.contextPath}/static/web/img/bg-select-pc.jpg) no-repeat center fixed;
            background-size: 100% 100%;
        }
    </style>
</head>
<body id="homeBody">
<script>
    if(/Android|webOS|iPhone|iPad|BlackBerry/i.test(navigator.userAgent)) {
        console.log(document.getElementById("homeBody"))
        document.getElementById("homeBody").style.background="url(${ticket.contextPath}/static/web/img/bg-select-phone.jpg) no-repeat center fixed ";
        document.getElementById("homeBody").style.backgroundSize="100% 100%";
    }
</script>
<div  class="container">
    <div class="row" style="margin-top: 10%;">
        <div class="col-xs-12" style="text-align: center;">
            <p style="color: #a69393;font-family: 楷体;font-size: 30px;font-weight:bold;">请选择账号登录</p>
        </div>

        <ul id="userList" class="col-xs-offset-2 col-xs-8" style="display: flex;flex-wrap:wrap;justify-content: flex-start;list-style-type: none;">
        </ul>
    </div>
    <div class="row">
        <div class="col-xs-12" style="text-align: center;">
            <p style="color: #a69393;font-family: 楷体;font-size: 30px;font-weight:bold;">或使用新账号</p>
            <p id="check-account"  style="color: red;display: none;margin-top: -10px;">请输入账号</p>
        </div>
        <div class="col-xs-offset-2 col-xs-8">
            <div class="input-group">
                <span class="input-group-addon" id="basic-addon1">账号</span>
                <input id="accout" type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
            </div>
        </div>
        <div class="col-xs-12">
            <div class="col-xs-6 col-xs-offset-3" style="text-align: center;height: 30px;width: 130px;">
                <button  style="height: 100%;background:none;border-radius: 5px;" onclick="verify()">生成二维码</button>
            </div>
        </div>
    </div>



    <div class="row">
        <div id="qrcode" style="width: 165px;height: 165px;margin: 0 auto;">

        </div>
    </div>
<script>
    var token;
    var tt;
    var loginToken;
    var account
    var checkAc = false;
    $(function() {
        loginToken = $.cookie('loginToken');
        if(!loginToken){
            console.log("跳转")
            window.location.href = "/web/page/auth";
        }
        findUsers()
        $( "#userList" ).delegate( "button", "click", function() {
            console.log("dianle")
        });
    });
    function findUsers() {
        var url="/web/api/users";
        $.ajax({
            type:'GET',
            url:url,
            processData:false,
            contentType:false,
            cache: false,
            beforeSend: function(request) {
                request.setRequestHeader("Authorization", "Bearer "+loginToken);
            },
            success:function(data){
                if(data!=null){
                    $.each(data, function(index, user) {
                        $("#userList").append("<li class=\"userLi\"  style=\"width: 100%;height:50px;border-radius: 5px;text-align: center;\"><button class=\"userA\" style=\"width: 100%;height:100%;border-radius: 5px;background: url(${ticket.contextPath}/static/web/img/yc-select.png);background-size: 100% 100%;\" onclick=\"goRob("+user+")\">"+user+"</button></li>");
                    });
                }
            },
            error:function(err){
                var ss = JSON.stringify(err)
                console.log(ss)
            }
        })
    }
    function goRob(user) {
        window.location.href = "/web/page/select?account="+user
    }
    function checkAccount() {
        var str = $("#accout").val();
        account = str
        if(str == "" || str == null || str == undefined){
            $("#check-account").css("display","block")
            checkAc = false
            return
        }
        $("#check-account").css("display","none")
        checkAc = true
    }
    function verify(){
        checkAccount()
        if(!checkAc){
            return
        }
        var url="/web/api/verify?account="+account;
        $.ajax({
            type:'GET',
            url:url,
            processData:false,
            contentType:false,
            cache: false,
            beforeSend: function(request) {
                request.setRequestHeader("Authorization", "Bearer "+loginToken);
            },
            success:function(data){
                if(data!=null){
                    if(data == "false" || !data){
                        window.location.href = "/web/page/select?account="+account
                    }else{
                        token(account)
                    }
                }
            },
            error:function(err){
                var ss = JSON.stringify(err)
                console.log(ss)
            }
        })
    }


    function token(acc){
        var url="/web/api/token?account="+acc;
        $.ajax({
            type:'GET',
            url:url,
            processData:false,
            contentType:false,
            cache: false,
            beforeSend: function(request) {
                request.setRequestHeader("Authorization", "Bearer "+loginToken);
            },
            success:function(data){
                if(data!=null){
                    qrcode(acc)
                }
            },
            error:function(err){
                var ss = JSON.stringify(err)
                console.log(ss)
            }
        })
    }

    function qrcode(acc){
        window.clearInterval(tt)
        var url="/web/api/qrcode?account="+acc;
        // var url = "http://192.168.1.25/upload/banner/fr_1706131908589351732.jpg";
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.responseType = "blob";
        //xhr.setRequestHeader("client_type", "DESKTOP_WEB");
        xhr.setRequestHeader("Authorization", "Bearer "+loginToken);
        xhr.onload = function () {
            if (this.status == 200) {
                var blob = this.response;
                var img = document.createElement("img");
                img.onload = function (e) {
                    window.URL.revokeObjectURL(img.src);
                };
                img.src = window.URL.createObjectURL(blob);
                $("#qrcode").html(img);
                tt = window.setInterval('check('+acc+')',1000)
                /*console.log($("#qecode img"))
                $("#qecode img").css("display","block")
                $("#qecode img").css("margin","0 auto")*/
            }
        }
        xhr.send();
    }

    function check(acc){
        var url="/web/api/qrcode";
        var data = new FormData();
        data.append("token",token);
        data.append("account",acc);
        $.ajax({
            type:'POST',
            url:url,
            processData:false,
            contentType: false,
            dataType: 'JSON',
            cache: false,
            data : data,
            beforeSend: function(request) {
                request.setRequestHeader("Authorization", "Bearer "+loginToken);
            },
            success:function(data){
                switch (data){
                    case 1 :
                        console.log("登录成功")
                        window.clearInterval(tt)
                        url = "/web/page/select?account="+acc
                        window.location.href = url
                        break;
                    case 2 :
                        console.log("扫码成功")
                        break;
                    default:
                        console.log("等待扫码")
                        break;
                }
            },
            error:function(err){
                var ss = JSON.stringify(err)
                console.log(ss)
            }
        })
    }
</script>
</div>
</body>
</html>